#{extends 'station_main.html' /}

#{set "moreStyles"}
<style type="text/css">
    .photoTable{border: none;}
    /*.photoTable{border: solid 1px;width:1000px;}*/
    .photoTable tr{border-left: none;border-right: none}
    .photoTable tr td{border-left: none;border-right: none}

    img{max-width:800px;}

    .module {
        float: left;
        padding: 5px 5px 5px 5px;
        margin: 10px 20px 10px 0;
            -moz-box-shadow: 10px 5px 5px #000000;
    -webkit-box-shadow: 10px 5px 5px #000000;
    box-shadow: 10px 5px 5px #000000;
            border:inset 2px #000000;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    }
</style>
#{/set}


#{set 'moreScripts'}

*{<script src="@{'/public/javascripts/ajaxfileupload.js'}"></script>}*
<script src="@{'/public/javascripts/jquery.form.js'}"></script>

<script type="text/javascript">

    $(function () {
        // Tabs
        $(function () {
            $("#station_tabs").tabs({
                ajaxOptions:{
                    error:function (xhr, status, index, anchor) {
                        $(anchor.hash).html("载入失败");
                    }
                }
            });
        });

        // -------- add const type dialog
        $('#add_station_div').dialog({
            autoOpen:false,
            width:900,
            height:600,
            modal:true,
            resizable: false,
            buttons:{
                "保存":function () {
                    if ($("#name").val().trim() == "") {
                        jqAlert("请填写站名");
                    }else{
                        $("#add_station_base_form").submit();
                        $(this).dialog("close");
                    }
                },
                "取消":function () {
                    $(this).dialog("close");
                }
            }
        });

        // -------- add const dialog
        $('#add_type_div').dialog({
            autoOpen:false,
            width:400,
            modal:true,
            resizable: false,
            buttons:{
                "保存":function () {
                    if ($("#typeName").val().trim() == "") {
                        jqAlert("请填写型号名称");
                    } else {
                        $("#add_type_form").submit();
                        $(this).dialog("close");
                    }
                },
                "取消":function () {
                    $(this).dialog("close");
                }
            }
        });

        $('#create_module_type_link').click(function () {
            $('#add_type_div').css('display', '');
            $('#add_type_div').dialog('open');
            return false;
        });

        // -------- edit user dialog
        $('#edit_div').dialog({
            autoOpen:false,
            width:400,
            modal:true,
            resizable:false,
            buttons:{
                "保存":function () {
                    $("#edit_form").submit();
                    $(this).dialog("close");
                },
                "取消":function () {
                    $(this).dialog("close");
                }
            }
        });


        ////////////////////////////////
        ////////////////////////////////
    });


    var detailForEditAction = #{jsAction2 @SysConstants.detailForEdit(':id') /}

    function showEditForm(constId,constRemark) {
        $('#edit_table_div').load(detailForEditAction({id:constId}), function () {});
        $("#edit_const_id").val(constId);
        $('#edit_div').css('display', '');
        $('#edit_div').dialog('option', "title", "修改常量（" + constRemark + "）基本信息");
        $('#edit_div').dialog('open');
    };

    var showNewAction = #{jsAction2 @Stations.newStation() /}
    function showNewStationInTab(){
        $('#new_edit_tab').load(showNewAction(), function () {});
        $("#new_edit_title").html("新增");
        $('#station_tabs').tabs('select', 1);
    }

    //showAlbumInTab
    var showAlbumAction = #{jsAction2 @Stations.album(':stationId') /}
    function showAlbumInTab(id,stationName){
        $('#view_tab').load(showAlbumAction({stationId:id}), function () {});
        $("#view_title").html(stationName+"站的相册");
        $('#station_tabs').tabs('select', 2);
    }

    var showModulesAction = #{jsAction2 @Stations.modules(':stationId') /}
    function showModulesInTab(id,stationName){
        $('#view_tab').load(showModulesAction({stationId:id}), function () {});
        $("#view_title").html(stationName+"站的模块");
        $('#station_tabs').tabs('select', 2);
    }
</script>


#{/set}


<h1 id="title">自动站管理</h1>
<div class="light_bar">
${stations.size()} / ${entityCount} 自动站
    &nbsp;
    <a href="#" onclick="showNewStationInTab();" id="create_station_link" class="ui-state-default ui-corner-all dialog_button">
        新增自动站</a>

    <label for="keyword" style="margin-left: 30px">名称：</label><input type="text" name="keyword" id="keyword" maxlength="30"/>
        <a href="#" id="search_link" class="ui-state-default ui-corner-all big_opt_button">搜索</a>

    #{pagination page:pageSequence ?: 1, size:entityCount /}
</div>


<div id="station_tabs">
    <ul>
        <li><a href="#station_list_tab">自动站列表</a></li>
        <li><a id="new_edit_title" href="#new_edit_tab">新建/编辑</a></li>
        <li><a id="view_title" href="#view_tab">详情</a></li>
    </ul>
    <div id="station_list_tab" class="tab_div">
        <table id="station-list">
            <thead>
            <tr>
                <th class="main">站名</th>
                <th class="main" width="50px">站号</th>
                <th class="main" width="70px">型号</th>
                <th class="main">站址</th>
                <th class="main" width="190px">行政区</th>
                <th class="main" width="100px">建设时间</th>
                <th width="180px">操作</th>
            </tr>
            </thead>

        #{if stations.size()>0}
            #{list items:stations, as:'st'}
                <tr>
                    <td class="main">${st.name}</td>
                    <td class="main">${st.stationNo}</td>
                    <td class="main">#{showConstValue constForeignKey: st.stationTypeId/}</td>
                    <td class="main">${st.address}</td>
                    <td class="main">${st.showDistrictInfo(memDistrictMap)}</td>
                    <td class="main">${st.buildTime==null?"":st.buildTime.format("yyyy-MM-dd")}</td>
                    <td class="main">
                        <a class="ui-state-default ui-corner-all opt_button" href="javascript:;"
                           onclick="showAlbumInTab('${st.id}','${st.name}')">照片</a>
                        <a class="ui-state-default ui-corner-all opt_button" href="javascript:;"
                           onclick="showModulesInTab('${st.id}','${st.name}');">模块</a>
                        <a class="ui-state-default ui-corner-all opt_button"
                           href="javascript:showEditForm('${st.id}','${st.name}');">编辑</a>
                        <a class="ui-state-default ui-corner-all opt_button"
                           href="javascript:requireActionByPost('@{Stations.delete}','${st.id}','确定删除自动站(${st.name})？');">删除</a>
                    </td>
                </tr>
            #{/list}
        #{/if}
        </table>
    </div>

    <div id="new_edit_tab" class="tab_div">
        *{load by ajax}*
    </div>
    <div id="view_tab" class="tab_div"></div>
</div>